<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸属性</title>
		<style>
			span{
				font-size: 2em;
				color: rgb(85, 255, 0);
				backgroun d-color: rgba(86,135,72,.1);
				/* 最大最小宽度问题 */}
				div#container{/* 权值：101 */
				 background-color: #f0f0f0;
				}
				div.box{
					background-color: #ff0e42;
					color:#fff;
					width: 80%;
					/* 最大宽度与普通宽度同时出现，以最大宽度为准 */
					ma x-wi dth: 150px;
					/* 最小宽度，页面承受最小宽度，小于尺寸，字体或者图片位置不变 
					 同时出现 min-width和max-width，最小值小于最大值，以最小值优先
					*/
					min-width: 200px;
				}
			
		</style>
	</head>
	<body>
		<!-- 所有属性值的单位 
		      常用尺寸单位：%，px 像素 绝对值，em 移动端 字体倍数
			  常用颜色单位：网页三原色：红 绿 蓝，组成页面上的所有颜色
			               rgb(0~255,0~255,0~255)
						   rgba(0~255,0~255,0~255,0~1) 遮罩层
						   #rrggbb 十六进制         组成：0~9 a~z  A~Z
						   常用十六进制：#000000 黑色 #ffffff 白色
			               简写十六进制：#ff0 #000 #fff
			  
		-->
		<span>lorem</span>
		<!-- 自适应：最大，小宽高   最小和最大宽度-->
		<div id="container">
					<div class="box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem aut fugiat reprehenderit suscipit autem voluptatum ex ipsa excepturi nesciunt alias recusandae, deserunt dolor delectus possimus quaerat! Tempora maiores dignissimos nesciunt.</div>
				</div>
	</body>
</html>